<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .el-table .cell{
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: #FF6537">
            <h1 style="font-size: 22px;color: white">
                萌宠小屋后台管理系统
                <span style="float: right;font-size: 15px">欢迎{{user.nick}}回来!
                    <a href="javascript:void(0)" @click="logout()">退出登录</a>
                </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside>
                <!--侧边栏开始-->
                <el-menu
                        class="el-menu-vertical-demo"
                        @select="menuChange">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-flag"></i>
                            分类管理
                        </template>
                        <el-menu-item index="1-1">分类列表</el-menu-item>
                        <el-menu-item index="1-2">添加分类</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-picture"></i>
                            轮播图管理
                        </template>
                        <el-menu-item index="2-1">轮播图列表</el-menu-item>
                        <el-menu-item index="2-2">添加轮播图</el-menu-item>
                        <el-menu-item index="2-3">删除轮播图</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-shopping-cart-2"></i>
                            商品管理
                        </template>
                        <el-menu-item index="3-1">商品列表</el-menu-item>
                        <el-menu-item index="3-2">添加商品</el-menu-item>
                        <el-menu-item index="3-3">删除商品</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-s-claim"></i>
                            订单管理
                        </template>
                        <el-menu-item index="4-1">发货</el-menu-item>
                        <el-menu-item index="4-2">退货</el-menu-item>
                        <el-menu-item index="4-3">换货</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-custom"></i>
                            权限管理
                        </template>
                        <el-menu-item index="5-1">添加权限</el-menu-item>
                        <el-menu-item index="5-2">删除权限</el-menu-item>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-s-check"></i>
                            管理员列表
                        </template>
                        <el-menu-item index="6-1">管理员列表</el-menu-item>
                        <el-menu-item index="6-2">添加管理员</el-menu-item>
                    </el-submenu>
                    <el-submenu index="7">
                        <template slot="title">
                            <i class="el-icon-s-check"></i>
                            库存管理
                        </template>
                        <el-menu-item index="7-1">出库管理</el-menu-item>
                        <el-menu-item index="7-2">入库管理</el-menu-item>
                        <el-menu-item index="7-3">成本管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="8">
                        <template slot="title">
                            <i class="el-icon-s-check"></i>
                            营业额管理
                        </template>
                        <el-menu-item index="8-1">当月营收</el-menu-item>
                        <el-menu-item index="8-2">当月成本</el-menu-item>
                        <el-menu-item index="8-3">当月利润</el-menu-item>
                    </el-submenu>
                </el-menu>
                <!--侧边栏结束-->
            </el-aside>

            <el-main>
                <!--分类管理-->
                <!--分类表格开始-->
                <el-table v-if="selectedIndex=='1-1'" :data="categoryArr">
                    <el-table-column type="index" label="编号"
                                     width="140"></el-table-column>
                    <el-table-column label="分类名称" prop="name"></el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="categoryDelete(scope.$index, scope.row)"
                                           title="这是一段内容确定删除吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                <!--分类表格结束-->

                <!--轮播图管理-->
                <!--轮播图列表开始-->
                <el-table v-if="selectedIndex=='2-1'" :data="bannerArr">
                    <el-table-column type="index" label="编号"
                                     width="140"></el-table-column>
                    <el-table-column label="轮播图">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="bannerDelete(scope.$index, scope.row)"
                                           title="这是一段内容确定删除吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                <!--轮播图列表结束-->

                <!--商品管理开始-->
                <!--商品列表开始-->
                <el-table v-if="selectedIndex=='3-1'" :data="productArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品标题" prop="title" width="150"></el-table-column>
                    <el-table-column label="价格" prop="price" width="100"></el-table-column>
                    <el-table-column label="销量" prop="saleCount" width="100"></el-table-column>
                    <el-table-column label="商品图片" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                                           title="这是一段内容确定删除吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                <!--商品列表结束-->

                <!--订单管理开始-->
                <!--发货开始-->
                <el-table v-if="selectedIndex=='4-1'" :data="ShipmentsArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品标题" prop="title" width="150"></el-table-column>
                    <el-table-column label="价格" prop="price" width="100"></el-table-column>
                    <el-table-column label="数量" prop="price" width="100"></el-table-column>
                    <el-table-column label="发货" prop="shipments " width="100"></el-table-column>
                    <el-table-column label="商品图片" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="Shipments(scope.$index, scope.row)"
                                           title="确定为客户发货吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">发货</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                </el-table>
                <!--发货结束-->

                <!--退货开始-->
                <el-table v-if="selectedIndex=='4-2'" :data="SalesReturnArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品标题" prop="title" width="150"></el-table-column>
                    <el-table-column label="价格" prop="price" width="100"></el-table-column>
                    <el-table-column label="数量" prop="price" width="100"></el-table-column>
                    <el-table-column label="退货" prop="salesReturn" width="100"></el-table-column>
                    <el-table-column label="商品图片" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="SalesReturn(scope.$index, scope.row)"
                                           title="确定为客户退货吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">退货</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                </el-table>
                <!--退货结束-->

                <!--换货开始-->
                <el-table v-if="selectedIndex=='4-3'" :data="barterArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品标题" prop="title" width="150"></el-table-column>
                    <el-table-column label="价格" prop="price" width="100"></el-table-column>
                    <el-table-column label="数量" prop="price" width="100"></el-table-column>
                    <el-table-column label="发货" prop="barter" width="100"></el-table-column>
                    <el-table-column label="商品图片" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="barter(scope.$index, scope.row)"
                                           title="确定为客户换货吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">换货</el-button>
                            </el-popconfirm>

                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                </el-table>
                <!--换货结束-->

                <!--权限管理开始-->
                <!--添加权限开始-->
                <el-table v-if="selectedIndex=='5-1'" :data="JurisdictionAddArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="分类管理权限" prop="classify" width="150"></el-table-column>
                    <el-table-column label="轮播图权限" prop="banner" width="100"></el-table-column>
                    <el-table-column label="商品权限" prop="product" width="100"></el-table-column>
                    <el-table-column label="订单权限" prop="orderForm" width="100"></el-table-column>
                    <el-table-column label="管理员列表" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="JurisdictionAdd(scope.$index, scope.row)"
                                           title="确定添加吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">添加</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                <!--添加权限结束-->

                <!--删除权限开始-->
                <el-table v-if="selectedIndex=='5-2'" :data="JurisdictionDeleteArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="分类管理权限" prop="classify" width="150"></el-table-column>
                    <el-table-column label="轮播图权限" prop="banner" width="100"></el-table-column>
                    <el-table-column label="商品权限" prop="product" width="100"></el-table-column>
                    <el-table-column label="订单权限" prop="orderForm" width="100"></el-table-column>
                    <el-table-column label="管理员列表" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="JurisdictionDelete(scope.$index, scope.row)"
                                           title="确定添加吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">添加</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                <!--删除权限结束-->

                <!--管理员列表-->
                <!--管理员列表开始-->
                <el-table v-if="selectedIndex=='6-1'" :data="adminArr" >
                    <el-table-column label="编号" prop="id" width="50"></el-table-column>
                    <el-table-column label="用户名" prop="username" width="150"></el-table-column>
                    <el-table-column label="密码" prop="password" width="100"></el-table-column>
                    <el-table-column label="昵称" prop="nickname" width="100"></el-table-column>
                    <el-table-column label="权限描述" prop="description" width="100"></el-table-column>
                    <el-table-column label="是否可用" prop="isEnable" width="100"></el-table-column>
                    //如下代码暂时未发现用途,先不使用
                    <!--<el-table-column label="管理员列表" width="150">
                        <template slot-scope="scope">
                            &lt;!&ndash;scope.row代表当前遍历的数组中的对象&ndash;&gt;
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>-->
                    *******************************
                    <el-table-column label="操作">
                        scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm
                                    confirm-button-text='好的'
                                    cancel-button-text='不用了'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="确定删除吗？"
                                    @confirm="adminDelete(scope.$index, scope.row)">
                                <el-button size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                            <!--click点击事件-->
                            <el-button size="mini" type="danger" slot="reference">
                                <a :href="'/updateAdmin.html?id='+scope.row.id">修改</a>
                            </el-button>

                        </template>
                    </el-table-column>
                    *******************************
                </el-table>
                <!--管理员列表结束-->

                <!--添加管理员开始-->
<!--                添加管理员跳转到新页面进行添加,对应编号为 "6-2"-->
                <!--添加管理员结束-->

                <!--库存管理-->
                <!--出库管理开始-->
                <el-table v-if="selectedIndex=='7-1'" :data="adminArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品名称" prop="classify" width="150"></el-table-column>
                    <el-table-column label="商品数量" prop="banner" width="100"></el-table-column>
                    <el-table-column label="商品价格" prop="product" width="100"></el-table-column>
                    <el-table-column label="管理员列表" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="JurisdictionDelete(scope.$index, scope.row)"
                                           title="确定添加吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">添加</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                <!--出库管理结束-->

                <!--入库管理开始-->
                <el-table v-if="selectedIndex=='7-2'" :data="adminArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品名称" prop="classify" width="150"></el-table-column>
                    <el-table-column label="商品数量" prop="banner" width="100"></el-table-column>
                    <el-table-column label="商品成本" prop="product" width="100"></el-table-column>
                    <el-table-column label="管理员列表" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="JurisdictionDelete(scope.$index, scope.row)"
                                           title="确定添加吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">添加</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                <!--入库管理结束-->

                <!--成本管理开始-->
                <el-table v-if="selectedIndex=='7-3'" :data="adminArr">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品名称" prop="classify" width="150"></el-table-column>
                    <el-table-column label="商品数量" prop="banner" width="100"></el-table-column>
                    <el-table-column label="商品价格" prop="product" width="100"></el-table-column>
                    <el-table-column label="商品成本" prop="orderForm" width="100"></el-table-column>
                    <el-table-column label="管理员列表" width="150">
                        <template slot-scope="scope">
                            <!--scope.row代表当前遍历的数组中的对象-->
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                    <el-table-column label="操作">
                        <!--scope代表每行对应的数据里面的index属性代表下标,
                        里面的row代表每行对应的数组中的对象-->
                        <template slot-scope="scope">
                            <!--confirm确认事件-->
                            <el-popconfirm @confirm="JurisdictionDelete(scope.$index, scope.row)"
                                           title="确定添加吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">添加</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    <!--*******************************-->
                </el-table>
                <!--成本管理结束-->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                selectedIndex:"1-1",
                categoryArr:[],
                bannerArr:[],
                productArr:[],
                user:{},
                ShipmentsArr:[],
                SalesReturnArr:[],
                barterArr:[],
                JurisdictionAddArr:[],
                JurisdictionDeleteArr:[],
                adminArr:[]
            }
        },
        methods:{
            menuChange(index){
                console.log(index);
                if (index=="1-2"){
                    //弹出输入框
                    v.$prompt("请输入分类名称","提示",{
                        confirmButtonText:"确定",
                        cancelButtonText:"取消"
                    }).then(function (object) {
                        console.log("分类名称:"+ object.value);
                        let name = object.value;
                        if (name==null||name.trim()==""){
                            v.$message.error("分类名称不能为空");
                            return;
                        }
                        axios.get("/category/insert?name="+name).then(function (response) {
                            location.reload();
                        })
                        //catch方法如果不加 当点击取消时会报错.
                    }).catch(function () {
                        console.log("取消了");
                    })
                }else if(index=="2-2"){
                    //跳转到添加轮播图页面
                    location.href="/insertBanner.html";
                }else if(index=="3-2"){
                    //跳转到添加商品页面
                    location.href="/insertProduct.html";
                }else if(index=="6-2"){
                    //跳转到添加管理员页面
                    location.href="/insertAdmin.html";
                } else{
                    v.selectedIndex = index;
                }
            },
            adminDelete(index,admin){
              axios.get("/admin/delete?id="+admin.id).then(function (){
                  v.adminArr.splice(index,1);
              })
            },
            categoryDelete(index,category){
                axios.get("/category/delete?id="+category.id).then(function () {
                    //splice(下标,长度)方法是JavaScript中数组删除元素的方法
                    v.categoryArr.splice(index,1);
                })
            },
            bannerDelete(index,banner){
                axios.get("/banner/delete?id="+banner.id).then(function () {
                    v.bannerArr.splice(index,1);
                })
            },
            productDelete(index,product){
                axios.get("/product/delete?id="+product.id).then(function () {
                    //删除数组中的数据
                    v.productArr.splice(index,1);
                })
            },
            logout(){
                    location.href="/adminLogin.html";//回到管理员登录页面
            }

        },
        created:function () {
            //获取管理员数据库的账号信息
            axios.get("/admin/listselect").then(function (response){
                v.adminArr=response.data;
            })

            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })
            axios.get("/banner/select").then(function (response) {
                v.bannerArr = response.data;
            })
            axios.get("/product/select").then(function (response) {
                v.productArr = response.data;
            })
            //获取当前登录的用户对象
            axios.get("/currentUser").then(function (response) {
                v.user = response.data;
                //判断如果返回的数据是空字符串代表未登录
                if (v.user==""){
                    location.href="/login.html";
                }
            })
        }
    })
</script>
</html>